<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
 <%@page isELIgnored="false"%> 
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>客户页面</title>
<%
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
	integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
	crossorigin="anonymous">
</head>
<body>
	<!-- 员工添加 模态框参数修改-->
	<div class="modal fade" id="custAddModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">新建客户信息</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal">
						<div class="form-group">
							<label class="col-sm-2 control-label">客户id</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="custId"
									placeholder="客户id">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">客户名称</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="custName"
									placeholder="客户名称">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">客户来源</label>
							<div class="col-sm-5">
								<select class="form-control" name="custSource">
									<option value="">——请选择——</option>
									<option value="电话营销">电话营销</option>
									<option value="网络营销">网络营销</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">所属行业</label>
							<div class="col-sm-5">
								<select class="form-control" name="custIndustry">
									<option value="">——请选择——</option>
									<option value="教育培训">教育培训</option>
									<option value="对外贸易">对外贸易</option>
									<option value="电子商务">电子商务</option>
									<option value="酒店旅游">酒店旅游</option>
									<option value="房地产">房地产</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">客户级别</label>
							<div class="col-sm-5">
								<select class="form-control" name="custLevel">
									<option value="">——请选择——</option>
									<option value="普通客户">普通客户</option>
									<option value="VIP客户">VIP客户</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">联系人</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="custLinkman"
									placeholder="联系人">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">固定电话</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="custPhone"
									placeholder="固定电话">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">移动电话</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="custMobile"
									placeholder="移动电话">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">邮政编码</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="custZipcode"
									placeholder="邮政编码">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">联系地址</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="custAddress"
									placeholder="联系地址">
							</div>
						</div>
					</form>
				</div>
				
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="cust_save_btn">创建客户</button>
				</div>
			</div>
		</div>
	</div>

	<!-- 员工修改模态框参数修改-->
	<div class="modal fade" id="custUpdateModal" tabindex="-1"
		role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">修改客户信息</h4>
				</div>
				<div class="modal-body">


					<form class="form-horizontal">
						<div class="form-group">
							<label class="col-sm-2 control-label">客户名称</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="custName"
									placeholder="客户名称">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">客户来源</label>
							<div class="col-sm-5">
								<select class="form-control" name="custSource">
									<option value="">——请选择——</option>
									<option value="电话营销">电话营销</option>
									<option value="网络营销">网络营销</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">所属行业</label>
							<div class="col-sm-5">
								<select class="form-control" name="custIndustry">
									<option value="">——请选择——</option>
									<option value="教育培训">教育培训</option>
									<option value="对外贸易">对外贸易</option>
									<option value="电子商务">电子商务</option>
									<option value="酒店旅游">酒店旅游</option>
									<option value="房地产">房地产</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">客户级别</label>
							<div class="col-sm-5">
								<select class="form-control" name="custLevel">
									<option value="">——请选择——</option>
									<option value="普通客户">普通客户</option>
									<option value="VIP客户">VIP客户</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">联系人</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="custLinkman"
									placeholder="联系人">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">固定电话</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="custPhone"
									placeholder="固定电话">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">移动电话</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="custMobile"
									placeholder="移动电话">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">邮政编码</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="custZipcode"
									placeholder="邮政编码">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">联系地址</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="custAddress"
									placeholder="联系地址">
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="cust_update_btn">保存修改</button>
				</div>
			</div>
		</div>
	</div>
	
	<div class="container">
		<!-- 标题 -->
		<div class="row">
			<div class="col-md-12">
				<h1>BOOT客户管理系统</h1>
			</div>
		</div>

		<div class="col-md-offset-2">
			<form id="custSelect" class="form-inline" method="post" action="${pageContext.request.contextPath}/customer/list" >
				<div class="form-group">
					<label>客户名称</label> <input style="width: 100px;" type="text"
						class="form-control" name="custName" id="custName">
				</div>

				<div class="form-group">
					<label>客户来源</label> <select style="width: 100px; height: 35px;"
						class="form-control" name="custSource" id="custSource">
						<option value="">请选择</option>
						<option value="电话营销">电话营销</option>
						<option value="网络营销">网络营销</option>
					</select> </select>
				</div>
				<div class="form-group">
					<label>所属行业</label> <select style="width: 120px; height: 35px;"
						class="form-control" name="custIndustry" id="custIndustry">
						<option value="">请选择</option>
						<option value="教育培训">教育培训</option>
						<option value="对外贸易">对外贸易</option>
						<option value="电子商务">电子商务</option>
						<option value="酒店旅游">酒店旅游</option>
						<option value="房地产">房地产</option>
					</select>
				</div>
				<div class="form-group">
					<label>客户级别</label> <select style="width: 120px; height: 35px;"
						class="form-control" name="custLevel" id="custLevel">
						<option value="">请选择</option>
						<option value="普通客户">普通客户</option>
						<option value="VIP客户">VIP客户</option>

					</select>
				</div>
				<button type="submit" id="cust_select_btn" class="btn btn-info">
					<span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>查询
				</button>
			</form>
		</div>

		<!-- 按钮 -->
		<div class="row">
			<div class="col-md-4 col-md-offset-1">

				<button type="button" class="btn btn-primary"
					id="cust_add_modal_btn">新增</button>
			
			</div>
		</div>
		<!-- 显示表格数据 -->
		<div class="row">
			<div class="col-md-12">
				<table class="table table-striped">
					<tr>
						<th>编号</th>
						<th>客户名称</th>
						<th>客户来源</th>
						<th>客户所属行业</th>
						<th>客户级别</th>
						<th>固定电话</th>
						<th>手机</th>
						<th>操作</th>
					</tr>
					<c:forEach items="${pageInfo.list }" var="cust">
						<tr>
							<th>${cust.custId}</th>
							<th>${cust.custName}</th>
							<th>${cust.custSource}</th>
							<th>${cust.custIndustry}</th>
							<th>${cust.custLevel}</th>
							<th>${cust.custPhone}</th>
							<th>${cust.custMobile}</th>
							<th>
								<button type="button" id="cust_edit_btn"
									class="btn btn-primary btn-sm" onclick= "editCustomer(${cust.custId})">
									<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
								</button>
								<button type="button" id="cust_delete_btn"
									class="btn btn-danger btn-sm" onclick= "deleteCustomer(${cust.custId})">
									<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除
								</button>
							</th>
						</tr>

					</c:forEach>

				</table>
			</div>
		</div>
		<!-- 显示分页信息 -->
		<div class="row">
			<!-- 分页文字信息 -->
			<div class="col-xs-6">当前${pageInfo.pageNum }页，共${pageInfo.pages }页，共${pageInfo.total }条记录
			</div>
			<!-- 分页条 -->
			<div class="col-xs-6">
				<nav aria-label="Page navigation">
					<ul class="pagination">
						<li><a href="${APP_PATH}/emps?pn=1">首页</a></li>
						<c:if test="${pageInfo.hasPreviousPage }">

							<li><a href="${APP_PATH}/emps?pn=${pageInfo.pageNum-1}"
								aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
							</a></li>
						</c:if>
						<c:forEach items="${pageInfo.navigatepageNums }" var="page_Num">
							<c:if test="${page_Num == pageInfo.pageNum }">
								<li class="active"><a href="#">${page_Num }</a></li>
							</c:if>
							<c:if test="${page_Num != pageInfo.pageNum }">
								<li><a href="${APP_PATH}/emps?pn=${page_Num }">${page_Num }</a></li>
							</c:if>
						</c:forEach>

						<c:if test="${pageInfo.hasNextPage }">
							<li><a href="${APP_PATH}/emps?pn=${pageInfo.pageNum+1}"
								aria-label="Next"> <span aria-hidden="true">&raquo;</span>
							</a></li>
						</c:if>

						<li><a href="${APP_PATH}/emps?pn=${pageInfo.pages}">末页</a></li>
					</ul>
				</nav>
			</div>
		</div>
	</div>


	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script
		src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
		integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
		crossorigin="anonymous"></script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script
		src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
		integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
		crossorigin="anonymous"></script>

	<script type="text/javascript">
		//点击新增按钮弹出模态框。
		$("#cust_add_modal_btn").click(function() {

			$("#custAddModal").modal({
				backdrop : "static"
			});
		});
		
		//将新建客户填写的表单数据提交给Controller保存
		$("#cust_save_btn").click(function() {

			//alert($("#custAddModal form").serialize());
			$.ajax({
				url : "${APP_PATH}/source",
				type : "POST",
				data : $("#custAddModal form").serialize(),
				success : function(result) {
					alert("添加成功！")
				}
			})
		});
		
		// 通过id获取修改的客户信息
		function editCustomer(id) {
		  $("#custUpdateModal").modal({
				backdrop:"static"  
		  });
		  $("#cust_update_btn").click(function() {

			//alert($("#custAddModal form").serialize());
			$.ajax({
		        type:"get",
		        url:"${APP_PATH}/custUpdate/"+id,
		        data: $("#custUpdateModal form").serialize(),
		        success:function(data) {
		           alert("修改成功！")
		           window.location.reload();
		        }
		    }); 
		});  
		}
		// 删除客户
		function deleteCustomer(id) {
			
		    if(confirm('确实要删除该客户吗?')) {
		$.ajax({
			type:"POST",
			url:"${APP_PATH}/delete/"+id,
			success:function(data){
				alert("删除成功！")
				window.location.reload();
			}
			
		})
		}}
		
		
	</script>
</body>
</html>